<template>
  <div class="content">
    <!-- <h1>mokid: {{mokid }}</h1> -->
    <h1 style="margin-bottom: 10px;">当前选择：{{ selectedMenu.mingc }}</h1>

    <div v-if="selectedMenu.xianslx == 1">
      <ul v-for="(item, idx) in wenzlb" :key="idx">
        <li @click="wenzxq(item)">{{ item.wenzbt }}</li>
      </ul>
    </div>

    <div v-if="selectedMenu.xianslx == 2">
      <div v-for="(item, idx) in tuwxq" :key="idx">
        <img v-if="item.zhut != null" :src="item.zhut" />
        <div class="card">
          <div class="card-header">
            <div>
              <h3>{{ item.mingc }}</h3>
            </div>
            <div class="ellipsis">{{ item.jianj }}</div>
          </div>
          <hr />
          <div class="card-list">
            <ul class="">
              <li  v-for="(item2, idx2) in item.wenzList" :key="idx2" @click="wenzxq(item2)">{{ item2.wenzbt }}</li>
            </ul>
            
          </div>
          <button v-if="item.wenzList.length > 0" style="width: 45px; height: 25px;" @click="more(item)">更多</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import _http from "../httpService";

export default {
  name: "ContentArea",
  props: {
    mokid: {
      type: String,
      required: true,
    },
    selectedMenu: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      tuwxq: [],
      wenzlb: [],
    };
  },

  watch: {
    selectedMenu: {
      handler(newVal, oldVal) {
        let that = this;
        console.log("selectedMenu changed:", newVal);

        _http
          .get("/wenz/yixlllmkWenz/list?suoslm=" + newVal.id)
          .then((resp) => {
            if (resp.data.success) {
              that.wenzlb = resp.data.result.records;
            }
          });
      },
      deep: true, // 深度监听对象内部属性的变化
      immediate: false, // 如果需要，可以设置为 true 以在监听开始时立即触发一次
    },

    mokid(newVal) {
      let that = this;
      console.log("Mokid changed:", newVal);

      _http
        .get("/lanm/yixlllmkLanm/getTuwxq?mokId=" + this.mokid)
        .then((resp) => {
          if (resp.data.success) {
            that.tuwxq = resp.data.result;
          }
        });
    },
  },

  mounted() {
    _http
      .get("/lanm/yixlllmkLanm/getTuwxq?mokId=" + this.mokid)
      .then((resp) => {
        if (resp.data.success) {
          this.tuwxq = resp.data.result;
        }
      });
  },

  methods: {
    more(item) {
      this.$router.push({
          path: "contentAreaList",
          query: { suoslm: item.id, mokid: this.mokid},
        });
      
    },

    wenzxq(wenz) {
      localStorage.setItem("wenzxq", JSON.stringify(wenz));
      window.open("/#/wenzxq");
    },
  },
};
</script>

<style scoped>  
li {  
  font-size: 15px;  
  position: relative;  
  padding-bottom: 10px;   
  margin-bottom: 10px;  
  display: list-item;  
}  
  
/* li::after {  
  content: "";  
  position: absolute;  
  left: 0;  
  bottom: 0;  
  width: 100%;  
  height: 1px;  
  background-color: #0eb4b6;  
}   */
  
h3 {  
  position: relative;  
  padding-left: 10px; /* 为竖线留出空间 */  
  display: inline-block; /* 确保伪元素在内容前显示 */  
}  
  
h3::before {  
  content: "";  
  position: absolute;  
  left: 0;  
  top: 50%;  
  transform: translateY(-50%); /* 垂直居中 */  
  height: 100%; /* 竖线的高度与 h3 相同 */  
  width: 3px; /* 竖线的宽度 */  
  background-color: #0eb4b6; /* 竖线的颜色 */  
}  
  
.ellipsis {  
  display: -webkit-box;  
  -webkit-box-orient: vertical;  
  -webkit-line-clamp: 3;  
  overflow: hidden;  
  text-overflow: ellipsis;  
}  
  
.content {  
  flex: 1;  
  padding: 20px;  
  text-align: left;  
}  
  
.card {  
  border: 1px solid #ddd;  
  border-radius: 0px;  
  padding: 16px;  
  max-width: 100%;  
  margin: 20px auto;  
}  
  
.card-header {  
  margin-bottom: 16px;  
}  
  
.card-header h3 {  
  margin: 0;  
  font-size: 1.5em;  
}  
  
.card-content {  
  display: flex;  
  flex-wrap: wrap;  
}  
  
.card-list ul {    
  display: flex;    
  flex-wrap: wrap; /* 允许换行 */    
  list-style-type: none; /* 移除默认的列表样式 */    
  padding: 0; /* 移除默认的内边距 */    
  margin: 0; /* 移除默认的外边距 */    
}    
  
.card-list li {    
  color: #0eb4b6;
  flex: 1 1 calc(33.333% - 20px); /* 每个li占据大约1/3的宽度，减去边距 */    
  margin: 10px; /* 设置边距以防止元素紧贴在一起 */    
  box-sizing: border-box; /* 确保边距和填充不会增加元素的总宽度 */    
  text-align: left; /* 可选：使文本居中 */    
}  
</style>